<template>
    <a-modal :title="$t('告警频率配置')" v-model='isShow' @cancel='handleClose' width='30%'
        @ok='handleSubmit' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        <!-- <a-spin size="large"
            style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
            tip="Submit successfully Loading..." v-if="spinning == true"></a-spin> -->
        <a-form :form='form'>
            <a-form-item :label="$t('【严重】告警频率')" v-bind="formLayout">
                <a-input v-decorator="['critical', {
                    rules: [
                        { required: true, message: $t('Enter') + $t('【严重】告警频率') },
                        { validator: validCritical },
                    ],initialValue:formData.critical
                }]" :placeholder="$t('Enter') + $t('【严重】告警频率')" addon-after="h" />
            </a-form-item>
            <a-form-item :label="$t('【警告】告警频率')" v-bind="formLayout">
                <a-input v-decorator="['warn', {
                    rules: [
                        { required: true, message: $t('Enter') + $t('【警告】告警频率') },
                        { validator: validWarn },
                    ],initialValue:formData.warn
                }]" :placeholder="$t('Enter') + $t('【警告】告警频率')" addon-after="h" />
            </a-form-item>
            <a-form-item :label="$t('【提示】告警频率')" v-bind="formLayout">
                <a-input v-decorator="['report', {
                    rules: [
                        { required: true, message: $t('Enter') + $t('【提示】告警频率') },
                        { validator: validReport },
                    ],initialValue:formData.report
                }]" :placeholder="$t('Enter') + $t('【提示】告警频率')" addon-after="h" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
            form:this.$form.createForm(this),
            formLayout:{
                labelCol: {span:9},
                wrapperCol: {span:15}
            },
            formData: {
                critical: '2',
                warn: '12',
                report: '24'
            }
        }
    },
    methods: {
        handleSubmit() {
            // this.isShow = false
            this.form.validateFields(async (err, value) => {
                if (!err) {
                    const params = {
                        report: Number(value.report),
                        warn: Number(value.warn),
                        critical: Number(value.critical),
                    }
                    const { data } = await this.$api.alarm.modifyAlarmRate(params)
                    if(data.flag == 1) {
                        this.model(data.id) //返回模板
                        this.notice(data.id, data.params, data.flag) //通知列表显示
                    }else {
                        this.$emit('get-list')
                        this.$message.success('修改成功')
                    }
                    this.isShow = false;
                }
            })
        },
        handleClose() {
            this.form.resetFields()
            this.isShow = false
        },
        validCritical(rule, value, callback) {
            const reg =  /^(0|[1-9][0-9]*)$/
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 2) {
                callback(this.$t('配置区间在1-2'));
            } else {
                callback();
            }
        },
        validWarn(rule, value, callback) {
            const reg =  /^(0|[1-9][0-9]*)$/
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 168) {
                callback(this.$t('配置区间在1-168'));
            } else {
                callback();
            }
        },
        validReport(rule, value, callback) {
            const reg =  /^(0|[1-9][0-9]*)$/
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 168) {
                callback(this.$t('配置区间在1-168'));
            } else {
                callback();
            }
        },
    } 
}
</script>
